<template>
	<div>
		<div class="app-container">
			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />

			<div class="w-full relative">
				<el-button type="primary" @click="add">{{ $t('marketing.preferential.add') }}</el-button>
				<div class="absolute top-0 right-0">
					<el-button v-prmis="'activity_pick_takeDown'" type="danger" @click="shelves">{{
						$t('marketing.preferential.remove') }}</el-button>
				</div>
			</div>

		</div>

		<div class="app-container" v-loading="data.mtloading">

			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full" @selection-change="handleSelectionChange"
				height="730">
				<el-table-column type="index" width="55" :label="$t('public.No')" />
				<el-table-column type="selection" width="55" :selectable="selectable" />
				<el-table-column prop="id" :label="$t('marketing.pickupcode.activityID')" />
				<el-table-column prop="pick_name" :label="$t('goods.corner.activitName')" show-overflow-tooltip />

				<el-table-column prop="desc" :label="$t('marketing.reduction.desc')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.desc || '--' }}
					</template>
				</el-table-column>

				<el-table-column prop="pick_type" :label="$t('marketing.reduction.type')" show-overflow-tooltip>
					<template #default="scope">
						<el-tag v-if="scope.row.pick_type == 1">{{ $t('marketing.pickupcode.systemRandom') }}</el-tag>
						<el-tag v-else type="warning">{{ $t('marketing.pickupcode.choice') }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="codeNum" :label="$t('marketing.pickupcode.activitNum')" show-overflow-tooltip />

				<el-table-column prop="time" :label="$t('date.activityTime')" show-overflow-tooltip>
					<template #default="scope">
						{{ level.gettime(scope.row.start_time, 3) }} / {{ level.gettime(scope.row.end_time, 3) }}
					</template>
				</el-table-column>

				<el-table-column prop="status" :label="$t('marketing.preferential.state')" show-overflow-tooltip>
					<template #default="scope">
						<el-tag :type="getstatus(scope.row.status, 1)">{{ getstatus(scope.row.status, 2) }}</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="status" :label="$t('marketing.preferential.Applicable')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.machineList.length }} / {{ scope.row.goodsList.length }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('public.operate')" width="200">
					<template #default="scope">
						<el-button type="info" size="small" @click="getDetails(scope.row)">{{ $t('public.details')
							}}</el-button>
						<el-button v-prmis="'activity_pick_add'" type="success" size="small"
							v-if="scope.row.status <= 2" @click="generate(scope.row.id)">{{ $t('public.generate')
							}}</el-button>
						<el-button v-prmis="'activity_pick_add'" type="primary"  size="small"
							v-if="scope.row.status <= 2" @click="generate1(scope.row)">{{ $t('public.import')
							}}</el-button>
						<el-button type="warning" size="small" v-if="scope.row.status == 1"
							@click="modify(scope.row)">{{ $t('public.modify') }}</el-button>
						<el-button v-prmis="'activity_pick_exportCode'" type="primary" size="small"
							@click="getexcel(scope.row.id, 1)">{{ $t('public.export') }}</el-button>
						<el-button v-prmis="'activity_pick_exportUsedList'" type="danger" size="small"
							v-if="scope.row.status != 1" @click="getexcel(scope.row.id, 2)">{{ $t('public.reportForms')
							}}</el-button>
					</template>
				</el-table-column>

			</el-table>

			<PageNum :total="data.total" :page="data.activity" @exposeData="current" @fraction="fraction" />

		</div>

		<!-- 生成提货码 -->
		<el-dialog v-model="data.demonstrate" :title="data.title" center
			:width="data.type == 'quantity' ? '30%' : '40%'"
			:class="data.type == 'quantity' ? '' : 'h-3/4 overflow-auto'">
			<quantity :info="data.cused" v-if="data.type == 'quantity'" @qantity="submit" />
			<machine :info="data.macgods" v-if="data.type == 'machine'" />
			<goods :info="data.macgods" v-if="data.type == 'goods'" />
		</el-dialog>
		<!-- 弹窗 -->
		<el-dialog v-model="data.tradestatus" :title="data.title" center width="20%">
			<tradeade @exposeData="gettrad" :id="data.rowId" :type="data.pick_type" />
		</el-dialog>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false" />
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import quantity from './common/quantity.vue';
import machine from './common/machine.vue';
import goods from './common/goods.vue';
import tradeade from './common/trade_ade.vue';
import level from "@/utils/level";
import { useRouter } from "vue-router";
import {
	getActivityPickList,
	takeDownActivityPick,
	addActivityPickCode,
	exportActivityPickCode,
	exportActivityPickCodeList
} from '@/api/marketing';
import { ElMessage, ElMessageBox } from "element-plus";
import exports from '@/components/export.vue';
const dialogExport = ref(false)
const router = useRouter()

let data = reactive({
	demonstrate: false, // 弹窗
	tradestatus: false, // 弹窗
	rowId: '', // 选中行
	pick_type: '', // 选中行
	mtloading: false, // 加载
	lookup: [ // 筛选栏
		{ title: $t('goods.corner.activitName'), type: 'input', value: '', key: 'pick_name' }
	],
	actID: [], // 选中活动
	list: [], // 列表信息
	title: '', // 弹窗标题
	type: '', // 弹窗类型
	cused: { // 生成提货码
		c_id: '',
		quantity: '',
	},
	activity: { // 筛选数据
		pick_name: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
})

// 取货码跳转详情
let getDetails = (row) => {
	let query = {
		id: row.id
	}
	router.push({ path: '/marketing/pickupcode/details/pickupCodeDetails', query })
}

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getActivityPickList(data.activity).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.activity[key] = e[key]
	}
	data.activity.page = 1
	data.activity.pageNum = 15
	getlist()
}

// 活动状态
let getstatus = (e, k) => {
	let arr = [
		$t('goods.corner.not'),
		$t('goods.corner.progress'),
		$t('goods.corner.ended'),
		$t('marketing.guess.active')
	]
	if (k == 1) {
		arr = [
			'info',
			'success',
			'warning',
			'danger'
		]
	}
	return arr[e - 1]
}

// 添加活动
let add = () => {
	router.push({ path: '/marketing/pickupcode/add_info' })
}

// 修改活动
let modify = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/marketing/pickupcode/details_info', query: query })
}

// 是否允许被选中
let selectable = (e) => {
	let status = true
	if (e.status == 4 || e.status == 3) {
		status = false
	}
	return status
}

// 选中的活动
let handleSelectionChange = (e) => {
	data.actID = []
	for (let item of e) {
		data.actID.push(item.id)
	}
}

// 关闭弹窗
let gettrad = () => {
	data.tradestatus = false
}

// 下架活动
let shelves = () => {
	if (data.actID.length == 0) {
		ElMessage({
			message: $t('message.pleaseDownActivity'),
			type: 'error'
		})
		return
	}
	let obj = {
		id: data.actID.join(',')
	}

	ElMessageBox.confirm($t('message.isDown'))
		.then(res => {
			takeDownActivityPick(obj).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.downSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

// 生成提货码弹窗
let generate = (e) => {
	data.cused = {
		id: e,
		quantity: 0
	}
	data.type = 'quantity'
	data.demonstrate = true
	data.title = $t('marketing.preferential.takeCode')
}

// 导入弹窗
let generate1 = (e) => {
	data.rowId = e.id;
	data.pick_type = e.pick_type;
	data.type = 'quantity'
	data.tradestatus = true
	data.title = $t('marketing.preferential.takeCode')
}

// 生成随机码
let submit = (e) => {
	if (e == false) {
		data.demonstrate = false
		return
	}

	if (e.quantity <= 0) {
		ElMessage({
			message: $t('message.pleaseEnterNum'),
			type: 'error'
		})
		return
	}

	addActivityPickCode(e).then(res => {
		if (res.state == 200) {
			ElMessage({
				message: $t('message.geneSuccess'),
				type: 'success'
			})
			data.demonstrate = false
			getlist()
			return
		}
		ElMessage({
			message: $t('message.networkFailed'),
			type: 'error'
		})
	})
}

// 导出Excel
let getexcel = (e, k) => {
	let obj = {
		id: e
	}

	ElMessageBox.confirm($t('message.isExport')).then(res => {
		if (k == 1) {
			exportActivityPickCode(obj).then(res => {
				if (res.state == 200) {
					dialogExport.value = true
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
			return
		}
		exportActivityPickCodeList(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		})
	}).catch(err => {
		console.log('取消')
	})
}

// 页数回调
let current = (e) => {
	data.activity.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.activity.pageNum = e
	getlist()
}

getlist()

</script>
